NO | 您所在的位置:网站首页 › css !import @import区别 › NO |
Conformance is available on Enterprise plans Importing CSS through (@import) is render blocking, causing browsers to sequentially download and parse the imported CSS (a critical request chain). app.module.css@import url('https://fonts.googleapis.com/css2?family=Inter');This can result in a flash of unstyled content (FOUC), where page content is briefly shown without complete styles until all required CSS has been downloaded and parsed, along with slower page load times. Imports to relative paths are processed by frameworks like Next.js, and will not be affected by this issue. app.module.css/* This import is safe. */ @import './globals.css';Note that this rule currently only parses CSS and not CSS written in Less, Sass, or other CSS preprocessor syntaxes.How to fixIf you're importing a font, you can use next/font which will automatically optimize your fonts (including custom fonts) and remove external network requests. If you're importing CSS, such as Bootstrap, avoid loading it from external sources, such as a CDN or the Next.js public folder. Instead, you can import that CSS relatively, or from a package. layout.tsx// CSS imported relatively from a local file. import './globals.css'; // CSS from a package in `node_modules`. import 'bootstrap/dist/css/bootstrap.css'; interface RootLayoutProps { children: React.ReactNode; } export default function RootLayout({ children }: RootLayoutProps) { return ( {children} ); } |
CopyRight 2018-2019 实验室设备网 版权所有 |